<template>
  <div class="p-16px tables" v-loading="loadingList">
    <div class="w-100%">
      <el-card shadow="never" v-loading="loadingCup">
        <el-descriptions :title="$t('home.material.cups')" :column="4" border>
          <template #extra>
            <el-button type="default" size="large" @click="getCup">{{ $t('common.refresh') }}</el-button>
          </template>
          <el-descriptions-item v-for="cup in cups" :key="cup.id" :label="cup.name">{{ cup.quantity }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <div class="m-t20px" v-loading="loadingTaking">
        <el-card shadow="never">
          <el-descriptions :title="$t('home.material.last')" :column="2" border>
            <template #extra>
              <el-button type="primary" size="large" @click="showDialog = true">{{ $t('home.material.take') }}</el-button>
            </template>
            <el-descriptions-item :label="$t('home.material.operator')">
              {{ lastTaking.operatorName ? lastTaking.operatorName : '--' }}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('home.material.createTime')">
              {{ lastTaking.createTime ? lastTaking.createTime : '--' }}
            </el-descriptions-item>
          </el-descriptions>

          <template v-if="lastTaking.createTime">
            <el-table :data="lastTaking.datas" style="width: 100%" size="large" height="calc(100vh - 380px)">
              <el-table-column prop="name" :label="$t('home.material.name')" />
              <!-- <el-table-column prop="nameRu" label="物料俄文" /> -->
              <el-table-column prop="quantity" :label="$t('home.material.quantity')" />
              <el-table-column prop="note" :label="$t('home.material.note')" />
            </el-table>
          </template>
        </el-card>
      </div>
    </div>

    <el-dialog v-model="showDialog" width="80%" :close-on-click-modal="false" @close="showDialog = false" @open="initData">
      <el-table :data="stocks" style="width: 100%">
        <el-table-column prop="name" :label="$t('home.material.name')" />
        <el-table-column prop="quantity" :label="$t('home.material.quantity')">
          <template #default="scope">
            <el-input-number v-model="scope.row.quantity" />
          </template>
        </el-table-column>
        <el-table-column prop="note" :label="$t('home.material.note')">
          <template #default="scope">
            <el-input v-model="scope.row.note" type="text" />
          </template>
        </el-table-column>
      </el-table>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showDialog = false">{{ $t('common.cancel') }}</el-button>
          <el-button type="primary" :loading="saving" @click="submit">{{ $t('common.sure') }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { useList } from '~/utils/page'

const loadingCup = ref(false)
const loadingTaking = ref(false)

const cups = ref<ApiMaterialInventory[]>()
const lastTaking = ref<ApiLastTakingVO>({} as ApiLastTakingVO)

const { tableData, getList, loadingList } = useList(apis.api.employeeShopMaterialPage, false)
tableData.extra.shopId = cache.getShop().id
tableData.meta.size = 500

const saving = ref(false)

onMounted(() => {
  getList()
  getCup()
  getLastTaking()
})

const stocks = ref<ApiMaterialInventory[]>([])

const initData = () => {
  stocks.value = tableData.lists.filter(x => x.type == 0).map(y => ({ ...y, quantity: null, note: '' }))
}

const submit = () => {
  apis.api.employeeShopMaterialTaking({ shopId: cache.getShop().id, datas: stocks.value }, saving).then(() => {
    showDialog.value = false
    getLastTaking()
  })
}

const getCup = () => {
  apis.api.employeeShopMaterialCups({ shopId: cache.getShop().id }, loadingCup).then(d => {
    cups.value = d
  })
}

const getLastTaking = () => {
  apis.api.employeeShopLastTaking({ shopId: cache.getShop().id }, loadingTaking).then(d => (lastTaking.value = d))
}

const showDialog = ref(false)
</script>
<style lang="scss" scoped>
.tables {
  width: calc(100vw - 96px);
}
// .ctx {
//   height: calc(100vh - 140px);
//   overflow-y: auto;
// }
</style>
